<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
		div{
			width: 100px;
			height: 100px;
			background-color: red;
			/* 动画属性 */
			/* 设置动画名称 */
			/* animation-name: leftToRight; */
			/* 设置动画持续时间 */
			/* animation-duration: 2s; */
			/*设置动画速度曲线 */
			/* animation-timing-function: linear; */
			/* 设置动画迭代次数 n(number 1 2 3 ) infinite无限次 */
			/* animation-iteration-count: infinite; */
			/* 设置动画是否进行反向播放 alternate表示反向播放 */
			/* animation-direction: alternate; */
			/* 设置动画等待执行时长 */
			/* animation-delay: 0s; */
			/* 设置动画等待或者停止的动画帧  forwards动画最后一帧 
				backwards 动画第一帧 both
			*/
			/* animation-fill-mode:both ; */
			/* 动画简写形式 */
			/* animation:name duration timing-function iteration-count delay direction fill-mode play-state ; */
			animation: leftToRight 2s ease-in infinite 0s alternate;
			
		}
		div:hover{
			/* 设置当前动画是否暂停 running是继续 paused是暂停 */
			animation-play-state: paused;
		}
		/* 动画关键帧 通过设置属性定义动画 */
		@keyframes leftToRight {
			/* 动画开始状态 0%   from */
			/* 动画过程状态 25% 50% 75% 85% */
			/* 动画结束状态 100%  to*/
			0%{
				margin-left: 0;
			}
			25%{
				margin-left: 150px;
			}
			50%{
				margin-left: 250px;
			}
			75%{
				margin-left: 750px;
			}
			100%{
				margin-left: 850px;
			}
		}
	</style>
</head>
<body>
	<div></div>
</body>
</html>